<template>
  <!-- 干部责任清单 -->
  <div class="print">
    <div id="printMe">
      <table
        align="center"
        width="100%"
        border="1"
        cellspacing="0"
        cellpadding="0"
      >
        <caption align="top">
          <h1>邯郸站干部责任单位清单</h1>
        </caption>
        <caption>
          <div style="height:30px;font-size:20px">
            <div style="position:absolute;">
              车间（中间站）、科室：{{
                newData.employee_dept_id__name
              }}
              姓名：{{ newData.employee_name }}
            </div>
            <div style="position:absolute;right:70px">
              年月：{{ newData.date_month_name }}
            </div>
          </div>
        </caption>

        <tr>
          <th colspan="2" rowspan="2" width="70">
            <p style="marginBottom:10px">考核</p>
            <p>项目</p>
          </th>
          <th colspan="2" class="topButtonTable">责任计划</th>
          <th colspan="2" class="topButtonTable">责任落实</th>
        </tr>
        <tr>
          <th class="innerTable">工作计划</th>
          <th class="innerTable">计划日期</th>
          <th class="innerTable">落实情况</th>
          <th class="innerTable">完成日期</th>
        </tr>
        <template
          v-for="(item, index) in newData.dataType.duty"
          :v-key="item.id + 'k'"
        >
          <tr :key="item.id">
            <th
              v-if="index === 0"
              :colspan="index === 0 ? '2' : '0'"
              :rowspan="index === 0 ? data.dataType.duty.length : '0'"
              class="topButtonTableLeft"
              width="60"
            >
              <p style="marginBottom:10px">常规</p>
              <p>责任</p>
            </th>
            <td class="innerTable">{{ item.plan }}</td>
            <td class="innerTable">{{ item.plan_date }}</td>
            <td class="innerTable">{{ item.finish }}</td>
            <td class="innerTable">{{ item.finish_date }}</td>
          </tr>
        </template>
        <template
          v-for="(item, index) in newData.dataType.company"
          :v-key="item.id + 'm'"
        >
          <tr :key="item.id">
            <th
              v-if="index === 0"
              :rowspan="
                newData.dataType.company.length +
                  newData.dataType.station.length +
                  newData.dataType.self.length
              "
              class="topButtonTableLeft"
              width="60"
            >
              交办责任
            </th>
            <th
              v-if="index === 0"
              :rowspan="index === 0 ? data.dataType.company.length : '0'"
              width="40"
              class="innerTableTitle"
            >
              集团公司交办
            </th>
            <td class="innerTable">{{ item.plan }}</td>
            <td class="innerTable">{{ item.plan_date }}</td>
            <td class="innerTable">{{ item.finish }}</td>
            <td class="innerTable">{{ item.finish_date }}</td>
          </tr>
        </template>
        <template
          v-for="(item, index) in newData.dataType.station"
          :v-key="item.id + 'z'"
        >
          <tr :key="item.id">
            <th
              v-if="index === 0"
              :rowspan="index === 0 ? data.dataType.station.length : '0'"
              width="40"
              class="innerTableTitle"
            >
              车站交办
            </th>
            <td class="innerTable">{{ item.plan }}</td>
            <td class="innerTable">{{ item.plan_date }}</td>
            <td class="innerTable">{{ item.finish }}</td>
            <td class="innerTable">{{ item.finish_date }}</td>
          </tr>
        </template>
        <template
          v-for="(item, index) in newData.dataType.self"
          :v-key="item.id + 'l'"
        >
          <tr :key="item.id">
            <th
              v-if="index === 0"
              :rowspan="index === 0 ? data.dataType.self.length : '0'"
              class="innerTableTitle"
              width="40"
            >
              主动作为
            </th>
            <td class="innerTable">{{ item.plan }}</td>
            <td class="innerTable">{{ item.plan_date }}</td>
            <td class="innerTable">{{ item.finish }}</td>
            <td class="innerTable">{{ item.finish_date }}</td>
          </tr>
        </template>
        <tr>
          <th colspan="2" class="topButtonTableLeft" width="70">
            <p style="marginBottom:10px">主管</p>
            <p>考评</p>
          </th>
          <td colspan="4" class="innerTable">
            <div class="examine" style="text-align:left;margin:6px">
              <div style="height:60px">考评意见：</div>
              <ul class="listStyle">
                <li><input type="checkbox">优秀</li>
                <li><input type="checkbox">称职</li>
                <li><input type="checkbox">基本称职</li>
                <li><input type="checkbox">不称职</li>
              </ul>
              <div style="text-align:right">
                领导签字：&emsp;&emsp;&emsp; &emsp; &emsp;
              </div>
              <div style="text-align:right">年&emsp;月&emsp;日</div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div style="text-align:center;margin-top:16px;">
      <el-button v-print="'#printMe'" type="primary">打印</el-button>
    </div>
  </div>
</template>
<script>
import './style.scss'
export default {
  props: {
    data: { type: Object, default: () => {} }
  },

  create() {},
  computed: {
    newData() {
      return this.data
    }
  }
}
</script>

<style lang="scss" scoped>
.listStyle {
  list-style: none;
  // margin: 0;
  li {
    display: inline-block;
    margin-right: 15px;
    input {
      height: 17px;
      margin: 0 3px;
    }
  }
}
</style>
